<template>
    <div class="site_box">
         <div class="header">
            <h4><router-link to="./home"><span class="iconfont">&#xe601; 返回</span></router-link>配置参数</h4>
        </div>
        <div class="main">
            <div class="box">
                 <h3>站点</h3>
                <el-form ref="form" :model="sizeForm" label-width="76px" size="small">
                    <el-form-item label="箱号配置">
                        <el-select v-model="sizeForm.model1" placeholder="开始条码">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="40" value="40"></el-option>
                        </el-select>
                        <el-select v-model="sizeForm.model2" placeholder="结束条码" style="margin-left:10px">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="40" value="40"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <button class="packBtn">完成</button>
    </div>
</template>

<script>
export default {
    name: 'Barcode',
    data() {
      return {
        sizeForm: {
          model1: '',
          model2: ''
        }
      }; }
}
</script>

<style scoped>
    .site_box{
        padding:0;
        margin:0;
    }
    .header{
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #2d3a4b;
        color: #fff;
        position:relative;
    }
     .header h4{
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 1.1rem;
     }
    .header h4 span{
        display: block;
        font-size: 0.9rem;
        position:absolute;
        top:0px;
        left: 10px;
        cursor: pointer;
        color: #fff;
    }
    .header h4 span:hover{
        color: rgb(169, 169, 177);
    }
    /* main */
    .main{
        width: 96%;
        margin: 0 auto;
    }
    .main .box{
       width: 800px;
       margin: 0 auto;
    }
    .main h3{
        text-indent: .2em;
    }
    .el-select {
        width: 340px;
    }
    @media (min-width:1400px){
        .main .box{
            width: 1000px;
            margin: 0 auto;
        }
        .el-select {
            width: 430px;
        }
    }
    @media (max-width:799px){
        .main .box{
            width: 500px;
            margin: 0 auto;
        }
        .el-select {
            width: 200px;
        }
    }
     @media (max-width:550px){
        .main .box{
            width: 350px;
            margin: 0 auto;
        }
        .el-select {
            width: 120px;
        }
    }
</style>